<template>
	<view class="container">
		    <!-- 轮播图 -->
		    <swiper
		      class="swiper-container"
		      indicator-dots
		      circular
		      autoplay
		      interval="5000"
			  style="height: 400rpx;"
		      indicator-color="rgba(255,255,255,0.5)"
		      indicator-active-color="#ffffff"
		    >
		      <swiper-item v-for="(item, index) in dishImages" :key="index">
		        <image
		          class="swiper-image"
		          mode="aspectFill"
		          :src="imagePrefix + item"
		          @click="previewImage(index)"
		        ></image>
		      </swiper-item>
		    </swiper>

		<!-- 商品基本信息 -->
		<view class="goods-info">
			<view class="goods-name">{{ dishDetail.name }}</view>
			<view class="goods-price">￥{{ dishDetail.price }}</view>
			<view class="goods-stock">规格：{{ dishDetail.specs }}</view>
			<view class="goods-stock" v-for="(item, index) in flavoDict" :key="index">
				<text v-if="item.dictValue == dishDetail.flavors">口味：{{ item.dictLabel  ||"默认原味"}}</text></view>
		</view>
	<!-- 商品基本信息 -->
		<view class="goods-info1">
			<view class="goods-name">菜品描述</view>
			<view class="goods-stock">{{ dishDetail.description }}</view>
		</view>
		<!-- 评价 -->
		<view class="reviews">
			<view class="flex justify-between" style="margin-top: 30rpx;">
				<text>评价</text>
				<view @click="toReviews()"> 查看全部> </view>
			</view>
			<view v-for="(item, index) in reviewsList" :key="index" class="evaluate-item">
				<view class="item-header">
					<image :src="imagePrefix + item.userAvatar" class="user-avatar"></image>
					<view class="user-info">
						<text class="user-name">{{ item.isAnonymous === 1 ? '匿名用户' : (item.userNickname || '匿名用户')}}</text>
						<star-rating :value="item.rating" :disabled="true" :showText="false"></star-rating>
						<text class="user-name">{{ item.title }}</text>
					</view>
					<text class="evaluate-time">{{ item.createTime }}</text>
				</view>
				<view class="item-content">
					<text>{{ item.content }}</text>
				</view>
				<view class="item-reply" v-if="item.replyContent">
					<text class="reply-label">商家回复：</text>
					<text class="reply-content">{{ item.replyContent }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getDishDetailById,
		getDish
	} from '@/api/system/dishDetail.js'
	import {
		getReviewsList,
		editLikeCount
	} from '@/api/system/reviews.js'
	import {
		getDicts
	} from '@/api/system/dict/data.js'

	export default {
		data() {
			return {
        imagePrefix: this.$imagePrefix,
				dishDetail: {},
				dishImages: [],
				reviewsList:[],
				flavoDict:[],
			};
		},
		onLoad(options) {
			// 获取商品ID
			const id = options.id;
			// 调用请求商品详情数据的方法
			this.getDishDetail(id);
			this.getReviewsList();

			this.getDictsFlavor("t_flavor");
		},

		methods: {
			// 请求商品详情数据
			getDishDetail(id) {
				getDish(id).then(res => {
										console.log(res.data);
					this.dishDetail = res.data
					this.dishImages =  res.data.image.split(',');
				})
			},
			// 图片预览功能
			    previewImage(index) {
			      uni.previewImage({
			        current: index, // 当前显示图片的索引
			        urls: this.dishImages.map(item => imagePrefix + item) // 需要预览的图片链接列表
			      });
			    },
				// 获取口味字典数据
				getDictsFlavor(value) {
					getDicts(value).then(res => {
						this.flavoDict = res.data;
						console.log("666" , this.flavoDict );
					})
				},
			//获取评价列表
			getReviewsList() {
				const ratingData = {
					"rating": 5
				}
				getReviewsList(ratingData).then(res => {

					this.reviewsList.push(res.data[0])
					this.reviewsList.push(res.data[1])
					console.log(this.reviewsList);
				})
			},
			//增加点赞数
			likeReview(id) {
				console.log('id:', id);
				const data = {
					"id": id
				}
				editLikeCount(data).then(res => {
					console.log('likeC：', res);
					this.getReviewsList()
				})
			},

			toReviews() {
				this.$tab.navigateTo('/pages/mine/reviews/reviewsList');
			},
		},
	}
</script>

<style scoped>
	.container {
		padding-bottom: 100rpx;
		/* 为底部导航栏留出空间 */
		background-color: #FFF;
	}
    .swiper-image{
		width: 100%;
		height: 100%;
	}
	.swiper {
		width: 100%;
		height: 0rpx;
	}

	.goods-info {
		padding: 40rpx  40rpx  10rpx  40rpx ;
	}

	.goods-name {
		font-size: 32rpx;
		font-weight: bold;
		margin: 20rpx 0;
	}

	.goods-info1 {
		padding: 0 40rpx;
	}
	.goods-name1 {
		font-size: 32rpx;
		font-weight: bold;
	}


	.goods-price {
		font-size: 36rpx;
		color: #f40;
		mmargin: 20rpx 0;
	}

	.goods-stock {
		font-size: 28rpx;
		color: #1f1f1f;
		margin: 20rpx 0;
	}

	.reviews {
		/* height: 600rpx; */
		padding: 20rpx;
		/* overflow: hidden; */
	}
	.item-header {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.user-avatar {
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
	}

	.user-info {
		flex: 1;
		margin-left: 20rpx;
	}

	.user-name {
		font-size: 26rpx;
		color: #333;
	}

	.evaluate-time {
		font-size: 24rpx;
		color: #999;
	}
	.item-content {
		font-size: 28rpx;
		color: #333;
		line-height: 1.5;
		margin-bottom: 30rpx;
	}
	.item-reply {
		background-color: #f7f7f7;
		padding: 20rpx;
		border-radius: 8rpx;
		margin-top: 20rpx;
	}

	.reply-label {
		font-size: 26rpx;
		color: #f40;
	}

	.reply-content {
		font-size: 26rpx;
		color: #666;
	}

</style>
